<template>
	<view class="container">
		<view class="message-list" v-if="storeInfo">
			<image class="store-image" :src="storeInfo.img" mode="aspectFill"></image>
			<view class="store-info">
				<view class="info-header">
					<view class="store-title">{{ storeInfo.name }}</view>
					<image src="/static/whb/phone.jpg" class="phone-icon-top" @click="callPhone(storeInfo.phone)"></image>
				</view>
				<view class="business-time">
					<text>营业时间：{{ storeInfo.week }}</text>
				</view>
				<view class="store-location">
					<text class="location-text">位置：{{ storeInfo.address }}</text>
					<image src="/static/whb/plane@3x.png" class="location-icon" @click="openMap" />
				</view>
			</view>
			<view class="price-section">
				<view class="price-title">油价详情</view>
				<view class="price-list">
					<view v-for="(type, index) in gasTypes" :key="index" class="price-item">
						<text class="gas-type">{{ type.typeName }}#</text>
						<text class="price">￥{{ type.price }}/L</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const storeInfo = ref(null);
const gasTypes = ref([]);

// 获取页面参数中的加油站ID
onLoad((options) => {
	if (options && options.id) {
		fetchStoreInfo(options.id);
		fetchGasPrices(options.id);
	}
});

// 获取加油站详细信息
function fetchStoreInfo(id) {
	uni.request({
		url: `http://localhost:9401/GesStation/${id}`,
		method: 'GET',
		header: {
			'Authorization': uni.getStorageSync('Token')
		},
		success: (res) => {
			// console.log('加油站信息:', res);
			if (res.data.code === 200) {
				storeInfo.value = res.data.data;
			} else {
				uni.showToast({
					title: res.data.msg || '获取加油站信息失败',
					icon: 'none'
				});
			}
		},
		fail: (error) => {
			console.error('网络请求失败:', error);
			uni.showToast({
				title: '网络请求失败，请重试',
				icon: 'none'
			});
		}
	});
}

// 获取加油站所有油品价格
function fetchGasPrices(stationId) {
	// 首先获取所有汽油类型
	uni.request({
		url: 'http://localhost:9401/CarGesType/list',
		method: 'GET',
		header: {
			'Authorization': uni.getStorageSync('Token')
		},
		success: (res) => {
			if (res.data.code === 200) {
				const types = res.data.rows;
				// 对每种类型获取价格
				types.forEach(type => {
					uni.request({
						url: `http://localhost:9401/gasStationType/getPrice`,
						method: 'GET',
						header: {
							'Authorization': uni.getStorageSync('Token')
						},
						data: {
							gasStationId: stationId,
							gasTypeId: type.id
						},
						success: (priceRes) => {
							if (priceRes.data.code === 200) {
								gasTypes.value.push({
									typeName: type.name,
									price: priceRes.data.data
								});
							}
						}
					});
				});
			} else {
				uni.showToast({
					title: '获取油品类型失败',
					icon: 'none'
				});
			}
		},
		fail: (error) => {
			console.error('获取油品类型失败:', error);
			uni.showToast({
				title: '获取油品类型失败，请重试',
				icon: 'none'
			});
		}
	});
}

// 拨打电话 (显示确认弹框)
function callPhone(phone) {
	if (!phone) {
		uni.showToast({
			title: '电话号码不存在',
			icon: 'none'
		});
		return;
	}

	uni.showModal({
		title: '拨打电话',
		content: '是否拨打电容卡：' + phone,
		confirmText: '拨号',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: (err) => {
						console.error('拨打电话失败:', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		},
		fail: (err) => {
			console.error('显示拨号弹框失败:', err);
			uni.showToast({
				title: '显示拨号弹框失败',
				icon: 'none'
			});
		}
	});
}

// 打开地图并导航
function openMap() {
	if (!storeInfo.value || !storeInfo.value.id) {
		uni.showToast({
			title: '加油站信息未加载，无法导航',
			icon: 'none'
		});
		return;
	}
	uni.navigateTo({
		url: `/pages/index/reful/navigation/navigation?id=${storeInfo.value.id}`,
		fail: (err) => {
			console.error('导航失败:', err);
			uni.showToast({
				title: '导航失败，请稍后重试',
				icon: 'none'
			});
		}
	});
}
</script>

<style>
	.container {
		background-color: #f5f5f5; 
		padding-top: 10px;
	}

	.message-list {
		background-color: white; 
		margin: 0 10px; 
		border-radius: 15rpx; 
		overflow: hidden;
		padding-bottom: 20rpx;
	}

	.store-image {
		width: calc(100% - 40rpx);
		height: 400rpx;
		object-fit: cover;
		border-radius: 5rpx;
		margin: 20rpx;
	}

	.store-info {
		padding: 0 30rpx;
		position: relative; 
	}

	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.store-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.phone-icon-top {
		width: 100rpx;
		height: 100rpx;
		position: absolute; /* Position absolutely */
		top: 50%; /* Align to the middle of store-info */
		right: 30rpx; /* Position from the right */
		transform: translateY(-50%); 
	}

	.business-time {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx; /* Adjust margin */
	}

	.store-location {
		display: flex;
		align-items: center;
		gap: 10rpx; /* Adjust gap */
		font-size: 28rpx; /* Add font size */
		color: #666; /* Add color */
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.price-section {
		margin-top: 20rpx; /* Space above the price card */
		margin: 20rpx 10px 0; /* Margin for the price card */
		background-color: white; /* White background for the card */
		border-radius: 15rpx; /* Rounded corners */
		padding: 30rpx; /* Padding inside the card */
	}

	.price-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.price-list {
		display: flex;
		flex-direction: column;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0; /* Add vertical padding */
		border-bottom: 1px solid #eee;
	}

	.price-item:last-child {
		border-bottom: none;
	}

	.gas-type {
		font-size: 30rpx;
		color: #333;
	}

	.price {
		font-size: 30rpx;
		color: #FF6B00;
	}

</style>